<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="../img/head.ico" type="image/x-icon">
    <link href="css/font-awesome.min.css?ver=4.7" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
    <script src="../js/bootstrap.min.js"></script>
    <title>Instructions</title>
    <style>
        .title {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 25px;
            font-weight: 700
        }

        .tb-head {
            font-size: 20px;
            font-weight: 700;
            text-align: center
        }

        .tb tr td {
            border: solid 1px;
            border-spacing: 0
        }

        .layout-img {
            width: 250px;
            padding: 0;
            margin: 0
        }

        .fig-caption {
            font-size: 17px;
            color: #36a1c4;
            text-align: center
        }

        .demo-pic {
            width: 1000px
        }

        .tb-title {
            text-align: center;
            font-size: 22px;
            font-weight: 700
        }

        .fig-caption {
            font-size: 17px;
            color: #36a1c4;
            text-align: center
        }
    </style>
</head>

<body style="width:1000px;margin:auto auto;font-size:16px"><br />
    <h2>A directed graph variant</h2><br />
    <h4>Please refer to the <a href="undirected-graph-help.html" target="_blank">undirected version</a>for information
        regarding layouts, basic functions, menus and keyboard shortcuts.</h4><br />
    <h2>Algorithms</h2>
    <div id="pr">
        <h3>Page Rank</h3>
        <figure><img src="demo/page-rank.png" class="demo-pic">
            <figcaption class="fig-caption">Perform Google's pagerank algorithm</figcaption>
        </figure>
        <table class="table table-striped">
            <thead>
                <tr class="tb-title">
                    <td>Source canvas</td>
                    <td>Result canvas</td>
                    <td>Animation</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Label the PR value on each node</td>
                    <td> - </td>
                    <td>Change the label size and background color of each node with respect to its PR value</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="prd">
        <h3>Detailed Page Rank</h3>
        <figure><img src="demo/detailed-page-rank.png" class="demo-pic">
            <figcaption class="fig-caption">Perform Google's pagerank algorithm</figcaption>
        </figure>
        <table class="table table-striped">
            <thead>
                <tr class="tb-title">
                    <td>Source canvas</td>
                    <td>Result canvas</td>
                    <td>Animation</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Label the PR value on each node</td>
                    <td> -</td>
                    <td> A step-by-step animation of the algorithm, showing the PR composition of each node by
                        highlighting itinbound edges and labeling the weight they give</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h2>Third-party code and dependencies</h2> Bootstrap<br />
    Cytoscape.js<br />
    Cola.js<br />
    Cytoscape-cola.js<br />
    Cytoscape-cose-bilkent.js<br />
    Cytoscape-cxtmenu.js<br />
    Cytoscape-panzoom.js<br />
    Cytoscape-edgehandles.js<br />
    Cytoscape-snap-to-grid.js<br />
    Cytoscape-spread.js<br />
    FontAwesone 4.7<br />
    jQuery<br />
    Weaver.js<br />
    Lodash.js<br />
    Math.js<br />
    <h2>Update catalog</h2><strong>March 3rd, 2018</strong><br />
    1. Fixed incorrect display of the native pagerank algorithm<br />
    2. Changed the normalization parameter so that the normalization of the rank happens in between two iterations<br />
    <br />
    <strong>October 14th</strong><br />
    1. Optimized node labels in the process of animation of the page rank algorithm<br />
    2. Added in process/final normalization of PR value<br />
    <br />
    <strong>October 13th</strong><br />
    1. Implemented step-by-step animation of the page rank algorithm using the iterative approach<br />
    2. Implemented a matrix manipulation approach of the page rank algorithm<br />
    3. Fixed minor issues affecting the accuracy of final
    PR values<br />
    <br />
    <strong>October 12th</strong><br />
    1. Add function call to the page rank algorithm implemented
    in Cytoscape's library<br />
    2. Implemented page rank algorithm using an iterative approach. <br />
    <br />
    <strong>October 11th</strong><br />
    1. Modified the undirected graph tools, making it suitable for visualizing directed graph
    algorithm<br />

</body>

</html>